<template>
  <div class="shopcar-container">
    <!-- 商品列表项区域 -->
    <div class="list">
      <div class="mui-content" v-for="(item, i) in infolist " :key=item.id>
			  <div class="mui-card">
			  	<div class="mui-card-content">
			  		<div class="mui-card-content-inner">
			  			<mt-switch 
              v-model="$store.getters.getGoodsSelected[item.id]"
              @change="SelectedChange(item.id,$store.getters.getGoodsSelected[item.id])"
              ></mt-switch>
              <img :src="item.img" alt="">
              <div class="info">
                <h3>{{item.title}}</h3>
                <p class="">
                  <span class="price">￥{{item.price}}</span>
                  <numberbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numberbox>
                  <a href="#" @click.prevent="remove(item.id,i)">删除</a>
                </p>
              </div>
			  		</div>
			  	</div>
			  </div>
      </div>
    </div>
      <!-- 商品结算区域 -->
    <div class="mui-content">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="totle">
              <div >
                <p>总计(不含运费)</p>
                <p>
                  已勾选商品<span class="c-red">{{$store.getters.getCountAndAmount.count}}</span>件,总价<span class="c-red">￥{{$store.getters.getCountAndAmount.amount}}</span>
                </p>
              </div>
              <mt-button type="danger" size="small" >去结算</mt-button>
            </div>
					</div>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
import shopnumberbox from '../subcomponents/ShopcarNumBox.vue'
export default {
  data(){
    return {
      infolist:[]
    }
  },
  created(){
    this.getgoods()
    // console.log(this.infolist)
  },
  methods:{
    // 获取加入购物车的商品信息
    getgoods(){
      this.infolist=this.$store.state.shopcar
    },
    remove(id,index){
      this.infolist.splice(index,1);
      this.$store.commit("reGoodsFrShopCar",id);
    },
    SelectedChange(id,val){
      this.$store.commit("updateGoodsSelected",{id,selected:val})
    }
  },
  components:{
    numberbox:shopnumberbox
  }
}

</script>

<style scoped lang="less">
  .shopcar-container{
    background-color: #eee;
    overflow: hidden;
    .list{
        .mui-card-content-inner{
     display: flex;
     
     img{
       width: 60px;
       height: 60px;
     }
     .info{
       margin-left:15px ;
       h3{
         font-size: 13px;
       }
       p{
         display: flex;
         margin-top: 15px;
         .price{
           color: #f00;
           font-weight: 700;
         }
         
       }
     }
   }
    }
    .totle{
      display: flex;
      justify-content: space-between;
      align-items:center;
      .c-red{
        color: #f00;
        font-size: 15px;
        font-weight: 700;
      }
    }
  }
</style>